<template>
  <div class="home" style="margin: 20px auto;">
    {{content}}
    <div class="kuang"><span class="kuang-left">用户名</span>天爱有情</div>
    <div class="kuang"><span class="kuang-left">密码</span>*********</div>
    <Button label="登录" id="login-btn" @click="loginBtn" />
    <div id="captcha-box"></div>


    <div style="margin-top: 20px">
      Mouse position is at: {{ x }}, {{ y }}

      <div style="margin-top: 20px">
        <input type="text" v-focus>
      </div>

      <div style="margin-top: 20px">
        <div class="concat-selectBtn relative">
          <div class="flex w-full">
            <img v-if="databaseData.indexOf('SCIE')!==-1&&selectDatabase!=='SCIE'" class="zoneImg" style="left: 158px;" src="@/assets/img/zone.svg" alt="">
            <img v-if="databaseData.indexOf('SSCI')!==-1&&selectDatabase!=='SSCI'" class="zoneImg" style="left: 228px;" src="@/assets/img/zone.svg" alt="">
            <img v-if="databaseData.indexOf('A&HCI')!==-1&&selectDatabase!=='A&HCI'" class="zoneImg" style="left: 314px;" src="@/assets/img/zone.svg" alt="">
            <img v-if="databaseData.indexOf('ESCI')!==-1&&selectDatabase!=='ESCI'" class="zoneImg" style="left: 572px;" src="@/assets/img/zone.svg" alt="">
          </div>
          <SelectButton v-selectbtn v-model="selectDatabase" :options="databaseData" @change="changeDataBse" :allowEmpty="false"/>
          <Card v-if="isSCIEPart" style="margin-top: 20px;">
            <template #title>Simple Card</template>
            <template #content>
              <p class="m-0">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
                quas!
              </p>
            </template>
          </Card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const loginBtn = () => {
  const config = {
    requestCaptchaDataUrl: '/gen', // 生成接口
    validCaptchaUrl: '/check', // 验证接口
    bindEl: '#captcha-box', // 验证码绑定的div块
    validSuccess: (res, c, tac) => {
      // 验证成功回调函数
      tac.destroyWindow();
      console.log('验证成功,后端返回的数据为', res);
      // 调用具体的登录方法或其他逻辑
    },
    validFail: (res, c, tac) => {
      // 验证失败的回调函数
      console.log('验证码验证失败回调...');
      // 验证失败后重新拉取验证码
      tac.reloadCaptcha();
    },
    btnRefreshFun: (el, tac) => {
      // 刷新按钮回调事件
      console.log('刷新按钮触发事件...');
      tac.reloadCaptcha();
    },
    btnCloseFun: (el, tac) => {
      // 关闭按钮回调事件
      console.log('关闭按钮触发事件...');
      tac.destroyWindow();
    }
  };
  const style = {
    logoUrl: null, // 去除logo或替换为自定义的logo地址
    // 其他样式配置...
  };


  window.initTAC('/tac', config, style).then(tac => {
    tac.init(); // 调用init则显示验证码
  }).catch(e => {
    console.log('初始化tac失败', e);
  });
}

const content = ref('请输入人才需求'); // 用于绑定编辑器内容的 Vue 响应式引用


/***********************************鼠标的监听***************************/
import { useMouse } from "~/tools/mouse";

const { x, y } = useMouse() ;


/***********************************自定义指令***************************/
// 在模板中启用 v-focus
const vFocus = {
  mounted: (el) => el.focus()
}

const vSelectbtn = {
  mounted: (el) => {
    el.classList.add('my-select-btn');
  }
}

/******************************测试封装SelectButton组件******************************/
const selectDatabase = ref('不限');
const databaseData =  ref(['不限', 'EI', 'SCIE', 'SSCI', 'A&HCI','CPCI-S','CPCI-SSH', 'ESCI', 'Scopus', 'CSCD', 'CSSCI', 'CNKI']);

const isSCIEPart = ref(false); //是否展示下面部分
/**
 * 切换数据库
 * @param val
 */
const changeDataBse = (val) => {
  //获取当前选中的数据库
  let currentVal = val.value;
  isSCIEPart.value = currentVal === 'SCIE' || currentVal === 'SSCI' || currentVal === 'A&HCI' || currentVal === 'ESCI';
}



</script>

<style lang="scss" scoped>
.relative{
  position: relative;
}

.absolute{
  position: absolute;
}

.zoneImg{
  position: absolute;
  top: -8px;
  z-index: 1000;
}
</style>
